@import './ZJTransition.css';
@import './ZJStyle.css';

:root {
  --ZJ-main: #FFFFFF;
  --ZJ-main-hover: #F3F3F5;
  --ZJ-main-bg-color: #F6F9F8;
  --ZJ-main-text-color: #333639;
  --ZJ-main-text-label-color: #00000080;
  --ZJ-main-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
  --ZJ-main-code-copy-bg: #dedede;
  --ZJ-main-message-color: #FFFFFF;
  --ZJ-main-border-light: 1px solid #DCDCDC;
  --ZJ-main-border-radius: 3px;
  --ZJ-main-border-radius-10: 10px;
  --ZJ-main-set-box-shadow-color: #0000001a;

  /* 全局宽度动画header main bar silder */
  --ZJ-main-transition: all 0.2s ease-in-out;
  --ZJ-main-transition-width: width 0.3s ease-in-out;

  /* dropdown */
  --ZJ-main-border-radius-dropdown: 4px;
  --ZJ-main-border-radius-5: 5px;

  /* 默认主题 */
  --ZJ-default-main: #7F56D9;
  --ZJ-default-main-hover: #EFF0FF;
  --ZJ-default-main-hover2: #cdb0ff;
  --ZJ-default-main-hover3: #e8d9ff;
  --ZJ-default-main-border-light: 1px solid var(--ZJ-default-main);
  --ZJ-default-main-border-dark: 1px solid var(--ZJ-default-main-hover2);
  --ZJ-default-main-active: #5b37a8;
  --ZJ-default-main-active-border: 1px solid #7343db;

  /* ZJAsideMenu */
  --ZJ-AsideMenu-width: 220px;
  --ZJ-AsideMenu-bg: #FFFFFF;
  --ZJ-AsideMenu-text-color: #333639;
  --ZJ-AsideMenu-hover: #EFF0FF;
  --ZJ-AsideMenu-hover2: #F3F3F5;

  /* ZJHeader */
  --ZJHeader-height: 56px;

  /* ZJHeaderBar */
  --ZJ-HeaderBar-height: 44px;
  --ZJ-HeaderBar-border-radius: 4px;

  /* ZJMain */
  --ZJMain-width: calc(100vw - var(--ZJ-AsideMenu-width));
  --n-bezier: cubic-bezier(.4, 0, .2, 1);

  --ZJ-welcome-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
  --ZJ-welcome-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
  --ZJ-welcome-name-color: transparent;
  --ZJ-welcome-image-filter: blur(70px);
  --ZJ-welcome-header-bg: rgba(255, 255, 255, 0.8);


  /* ZJButton */
  --ZJ-button-height: 34px;
  --ZJ-button-font-size: 14px;
  --ZJ-button-padding: 0 14px;
  --ZJ-button-border-radius: 8px;
  --ZJ-button-transition: .3s;
  /* success */
  --ZJ-success-light: #36ad6a;
  --ZJ-success-dark: #18a058;
  --ZJ-success-border-light: 1px solid #36ad6a;
  --ZJ-success-border-dark: 1px solid #18a058;
  --ZJ-success-active: #0c7a43;
  --ZJ-success-active-border: 1px solid #0c7a43;
  /* error */
  --ZJ-error-light: #de576d;
  --ZJ-error-dark: #D92D20;
  --ZJ-error-border-light: 1px solid #de576d;
  --ZJ-error-border-dark: 1px solid #d03050;
  --ZJ-error-active: #ab1f3f;
  --ZJ-error-active-border: 1px solid #ab1f3f;
  /* info */
  --ZJ-info-light: #4098fc;
  --ZJ-info-dark: #2080f0;
  --ZJ-info-border-light: 1px solid #4098fc;
  --ZJ-info-border-dark: 1px solid #2080f0;
  --ZJ-info-active: #1060c9;
  --ZJ-info-active-border: 1px solid #1060c9;
  /* warning */
  --ZJ-warning-light: #fcb040;
  --ZJ-warning-dark: #f0a020;
  --ZJ-warning-border-light: 1px solid #fcb040;
  --ZJ-warning-border-dark: 1px solid #f0a020;
  --ZJ-warning-active: #c97c10;
  --ZJ-warning-active-border: 1px solid #c97c10;
}